<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">打开文件夹</button>
    <div class="container">
        <div class="left">

        </div>
        <div class="right"></div>
    </div>
</body>

<script>
    const btn = document.querySelector(".btn")
    btn.onclick = async function () {
        const handle = await showDirectoryPicker()
        const root = await processHandle(handle)
        console.log(root);
        const index = root.children.findIndex(k => k.kind === 'file')
        const file = await root.children[index].getFile()
        const reader = new FileReader()
        reader.readAsText(file, "utf-8")
        reader.onload = (e) => {
            console.log(e.target.result);
        }
    }

    const processHandle = async (handle) => {
        if (handle.kind === 'file') {
            return handle
        }
        handle.children = []
        const iter = await handle.entries() // 获取文件夹中的所以内容
        // 异步迭代器
        for await (const iterator of iter) {
            const subChildren = await processHandle(iterator[1])
            handle.children.push(subChildren)
        }
        return handle
    }
</script>

</html>